<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>BASIC DRAG-AND-DROP DIVS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
</script>
<style type="text/css">
	div
	{
		margin: 0px;
		padding: 0px;
	}
	.verticalgridline
	{
		padding-top: 27px;
	}
	.box, .handle
	{
		font-size: 14px;
		font-family: Arial, sans-serif;
		border: 1px solid #aaa;
	}

	/** For the element **/
	.box-small
	{
		float: left;
		padding: 0px;
		width: 100px;
		height: 62px;
		margin: 5px;
		border-width: thin;
		border-style: dashed;
		background-color: #f0f;
		z-index: 1;
	}
	
	.box-small p
	{
		color: #000;
		font-size: 12px;
		margin: 5px 5px 10px 5px;
		text-align: left;
		white-space: normal;
	}

	.box-small span
	{
		color: #000;
		font-size: 10px;
		margin: 5px 5px 10px 5px;
		text-align: left;
		white-space: normal;
	}

	.box
	{
		float: left;
		padding: 0px;
		width: 300px;
		height: 200px;
		margin: 5px;
		background-color: #eee;
		z-index: 1;
	}
	
	.box-large
	{
		float: left;
		border: thin solid rgb(0,0,0);
		padding: 0px;
		width: 400px;
		height: 300px;
		margin: 5px;
		background-color: #eee;
		z-index: 1;
	}
	
	.handle
	{
		cursor: move;
		height: 14px;
		border-width: 0px 0px 1px 0px;
		background: #666;
		color: #eee;
		padding: 2px 6px;
		margin: 0px;
		/*width: 100%;*/
		display: block;
	}
	.box p
	{
		font-size: 12px;
		margin: 5px 5px 10px 5px;
		text-align: left;
		white-space: normal;
		/*background-color: #fff;*/
	}

	fieldset
	{
		width: 60px;
	}

	fieldset input
	{
		margin: 5px;
		background-color: black;
		color: white;
	}

	.tall
	{
		width: 150px;
		height: 500px;
	}
	
	.broad
	{
		width: 600px;
		height: 150px;
	}
	
	.green
	{
		background-color: green;
	}
</style>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? " https://ssl." : "http://www.");
document.write("\<script src='" + gaJsHost + " google-analytics.com/ga.js' type='text/javascript'>\<\/script>" );
var pageTracker = _gat._getTracker("UA-3115657-1");
pageTracker._initData();
pageTracker._trackVisit();
</script>
<script type="text/javascript" src="../ToolMan/core.js"></script>
<script type="text/javascript" src="../ToolMan/events.js"></script>
<script type="text/javascript" src="../ToolMan/css.js"></script>
<script type="text/javascript" src="../ToolMan/coordinates.js"></script>
<script type="text/javascript" src="../ToolMan/drag.js"></script>

<script type="text/javascript" src="../jsTool/core-ext.js"></script>
<script type="text/javascript" src="../jsTool/intersection-ext.js"></script>
<script type="text/javascript" src="../jsTool/drag2container-ext.js"></script>
<script type="text/javascript" src="../jsTool/raise-ext.js"></script>

<!-- load test module -->
<script type="text/javascript" src="../jsTool/test-ext.js"></script>

<script language="JavaScript">
window.onload = function()
{
	// declare dependencies
	var drag2cs = Tool.drag2container();
	var drag = ToolMan.drag();
	var raise = Tool.raise();
	var dragGroup = null;

	$ =
	{
		getById: function (id) { return document.getElementById(id); }
		// ...
	};

	// fetch item
	var item1 = $.getById('item1');
	var item2 = $.getById('item2');
	var item3 = $.getById('item3');
	var item4 = $.getById('item4');
	var item5 = $.getById('item5');
	
	var group1 = drag.createSimpleGroup ($.getById('container1'), $.getById('handle1'));
	var group2 = drag.createSimpleGroup ($.getById('container2'), $.getById('handle2'));
	var group5 = drag.createSimpleGroup ($.getById('container5'), $.getById('handle5'));
	var group6 = drag.createSimpleGroup ($.getById('container6'), $.getById('handle6'));
	
	raise.makeRaisable (group1);
	raise.makeRaisable (group2);
	raise.makeRaisable (group5);
	raise.makeRaisable (group6);
	
	var containers =
	[ 
		group1.element,
		group2.element,
		$.getById('container3'),
		$.getById('container4'),
		group5.element,
		group6.element
	];
		
	drag2cs.makeItemContainable(item1, containers);
	drag2cs.makeItemContainable(item2, containers);
	drag2cs.makeItemContainable(item3, containers);
	drag2cs.makeItemContainable(item4, containers);
	drag2cs.makeItemContainable(item5, containers);
		
} // end of window.onload
</script>
</head>
<body>
<div>
	<div id="item5" class="box-small">
		<p>Item 5</p>
	</div>
	<div id="item1" class="box-small">
		<p>Item 1</p>
	</div>

	<div id="item4" class="box-small">
		<p>Item 4</p>
	</div>
	
	<div id="item2" class="box-small">
		<p>Item 2</p>
	</div>
	<div id="item3" class="box-small">
		<p>Item 3</p>
	</div>		


	<br style="clear: left" />

	<div id="container1" class="box-large">
		<b id="handle1" class="handle">Drag</b>
		&nbsp;
		<div class="box-small green">
			&nbsp;
		</div>
		<!--
		<div class="box-small green">
			&nbsp;
		</div>
		<div class="box-small green">
			&nbsp;
		</div>
		<div class="box-small green">
			&nbsp;
		</div>
		-->		
	</div>
	
	<div id="container2" class="box-large">
		<b id="handle2" class="handle">Drag</b>
		&nbsp;
		<div class="box-small green">
			&nbsp;
		</div>
		<div class="box-small green">
			&nbsp;
		</div>
		
		<div class="box-small green">
			&nbsp;
		</div>
		<div class="box-small green">
			&nbsp;
		</div>
		<!--
		-->
	</div>
	
	<div id="container3" class="box-large">
		&nbsp;
		<!--
		<div class="box-small green">
			&nbsp;
		</div>

		<div class="box-small green">
			&nbsp;
		</div>
		<div class="box-small green">
			&nbsp;
		</div>
		<div class="box-small green">
			&nbsp;
		</div>
		-->
	</div>
	
	<div id="container4" class="box-large">
		&nbsp;
		<div class="box-small green">
			&nbsp;
		</div>	
		<div class="box-small green">
			&nbsp;
		</div>
		<div class="box-small green">
			&nbsp;
		</div>
		<div class="box-small green">
			&nbsp;
		</div>	
		<div class="box-small green">
			&nbsp;
		</div>
	</div>
	
	<div id="container5" class="box-large tall">
		<b id="handle5" class="handle">Drag</b>
		&nbsp;
	</div>
	<div id="container6" class="box-large broad">
		<b id="handle6" class="handle">Drag</b>
		&nbsp;
	</div>		

		
</div>
</body>
</html>
